// 福利
<template>
	<view class="welfare_content">
		<view class="background"></view>
	<!-- 	<customNav title="福利中心" titleFontSize="17" leftTitleFontSize="16"
		backgroundColor="#A0D1E8" 
		:border="false"
		leftIcon="back"
		statusBar="true" fixed="true"
		@clickLeft="navigateBack">
		 </customNav> -->
		 <view class="info" :style="{'top': infoTop}">
			 <signIn />
		<!-- 	 <taskList /> -->
		 </view>
		
	</view>
</template>

<script>
	import customNav from '../../components/custom-navbar/custom-navbar.vue'
	import signIn from '../../pages/welfare/welfare-signIn.vue'
	import taskList from '../../pages/welfare/welfare-taskList.vue'
	export default {
		data() {
			return {
				infoTop: 0
			}
		},
		methods: {
			initData() {
				this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
				
				let navbarHeight = uni.getSystemInfoSync().statusBarHeight + 44
				this.infoTop = navbarHeight + 30 + 'px'
			},
			navigateBack() {
				uni.navigateBack()
			}
		},
		mounted() {
			this.initData()
		},
		components: {
			customNav,
			signIn,
			taskList
		}
	}
</script>

<style lang="scss">
	.welfare_content{
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		width: 100%;
		height: 100%;
		
		.background{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, #8CD3EF, #E0D69B);
			z-index: -1;
		}
		
		.info{
			position: absolute;
			display: flex;
			flex-direction: column;
			width: 100%;
		}
	}
</style>
